<template>
  <div style="background-color:#F7F7F7;height: 100% ">

    <div>
      <div style="float: left;width: 100%;height: 100px;">
        <div style="float: left;width: 50px;height: 50px;border-radius: 50px;background-color: white;margin: 20px">
          <van-icon name="arrow-left" size="30px" style="margin: 9px" @click="fanhui"/>
        </div>
        <h2 style="float: left;margin-left: 80px;margin-top: 25px">搜索结果</h2>

        <!-- 租车车辆信息栏 -->


      </div>


      <div style="float: left;width: 100%;height: 130px;">
        <van-search
            v-model="cars.carModel"
            :show-action="showAction"
            placeholder="请输入搜索关键词"
            style="margin: 32px;
    width: 70%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: none;"
            @cancel="onCancel"
            @focus="onFocus"
            @search="onSearch"
        ></van-search>
        <button style="   float: right;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-right: 42px;
    margin-top: -86px;
    border: none;
    background-color: white;
    width: 55px;
    height: 54px;">
          <van-cell style="
    " @click="showPopup">
            <van-icon name="search"/>
          </van-cell>
        </button>

      </div>

      <!--      <h3 style="float:left; margin-left: 10%" v-if="carList.length!=0">为你推荐</h3>-->
      <!--      <h3 style="float:left; margin-left: 10%" v-if="carList.length==0">暂无推荐</h3>-->

      <div v-if="flag"  class="car-rental-container">
        <div v-for="(car, index) in carList" :key="index" @click="tiaozhuan(car)" class="carRentalDiv2">
          <div class="carRentalDiv3">
            <img class="carRentalImg2" :src="car.imageUrl" alt="Car Image">
          </div>
          <div class="carRentalDiv4">
            <b class="carRentalB2">{{ car.carModel }}</b><br>
            <span class="carRentalSpan1">
          <svg class="icon1" height="18" width="18" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M629.333333 330.666667h10.666667a117.333333 117.333333 0 0 1 117.333333 117.333333v330.666667a42.666667 42.666667 0 1 0 85.333334 0V277.333333a53.333333 53.333333 0 0 1-29.354667-97.877333L768 106.666667l22.613333-22.613334 116.053334 116.032V778.666667a106.666667 106.666667 0 0 1-213.333334 0V448a53.333333 53.333333 0 0 0-53.333333-53.333333h-10.666667v512H682.666667v64H85.333333v-64h53.333334V170.666667A117.333333 117.333333 0 0 1 256 53.333333h256A117.333333 117.333333 0 0 1 629.333333 170.666667v160z m-64 576V170.666667A53.333333 53.333333 0 0 0 512 117.333333H256A53.333333 53.333333 0 0 0 202.666667 170.666667v736h362.666666z m-298.666666-704h234.666666v192h-234.666666v-192z m64 64v64h106.666666v-64h-106.666666zM256 768h256v64H256v-64z"
                fill="#979797"></path>
          </svg>
          <span style="display: inline-block; vertical-align: middle;">%{{ car.fuelLevel }}</span>
        </span><br><br>
            <span class="carRentalSpan2">
          <van-rate v-model="value" :count="1"/>
          <span class="carRentalSpan3">{{ car.rating }}个评价</span>
        </span>
          </div>
          <div class="carRentalDiv5">
            <p class="carRentalP1">
              <svg class="icon2" height="15" width="15" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M511.913993 63.989249C317.882076 63.989249 159.973123 221.898203 159.973123 415.930119c0 187.323366 315.473879 519.998656 328.890979 534.103813 6.020494 6.364522 14.449185 9.976818 23.221905 9.976818 0.172014 0 0.516042 0 0.688056 0 8.944734 0 17.545439-4.128339 23.393919-11.008903l109.22896-125.054258c145.179909-177.690576 218.629934-314.957836 218.629934-407.845456C864.026877 221.898203 706.117924 63.989249 511.913993 63.989249zM511.913993 575.903242c-88.415253 0-159.973123-71.55787-159.973123-159.973123s71.55787-159.973123 159.973123-159.973123 159.973123 71.55787 159.973123 159.973123S600.329246 575.903242 511.913993 575.903242z"
                    fill="#575B66"></path>
              </svg>
              <!--              <span class="carRentalSpan4">{{ car.distance }}</span>-->
              <span class="carRentalSpan4">1.3</span>
            </p>
            <span>
          <span><b>￥{{ car.pricePerHour }}</b>/小时</span>
        </span>
          </div>
        </div>
      </div>

    </div>

    <!-- 筛选弹窗 -->
    <van-popup v-model="show" :style="{ height: '90%' }" position="bottom" round>
      <div>
        <!-- 关闭弹窗按钮 -->
        <div>
          <van-icon name="cross" size="25px" style="float: left;margin-left: 25px;margin-top: 5px"
                    @click="show = false"/>
          <h2>筛选</h2>
        </div>

<!--        &lt;!&ndash; 车的类型 &ndash;&gt;-->
<!--        <div style="height: 247px">-->
<!--          <h2 style="float: left;margin-left: 25px;margin-top: 5px">车的类型</h2>-->
<!--          <div style="float: left;width: 100%;height: 100px;margin-left: 20px">-->

<!--            <div v-for="(value, key) in top" :key="key"-->
<!--                 style="float: left;width: 100px;height: 80px;background-color: #F7F7F7;margin-top: 10px;margin-left: 10px">-->

<!--              <img-->
<!--                  :src="`http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_00${key === 'all' ? '1' : key === 'suv' ? '2' : key === 'econ' ? '3' : '1'}.PNG`"-->
<!--                  style="width: 80%">-->
<!--              <p style="float:left; margin-top: 6px; margin-left: 19px;color: #3474FF">{{ value }}</p>-->

<!--            </div>-->

<!--          </div>-->
<!--        </div>-->

        <!-- 品牌 -->
        <div style="float: left;width: 100%;height: 245px;margin-left: 20px;">
          <h2 style="float: left;margin-top: 10px">品牌</h2>
          <div id="brand-one" style="width:100%;height: 150px;float: left">
            <div v-for="(value, key) in brand" :key="key" style="float: left;">
              <button :class="{'active-brand': selectedBrand === key}"
                      style="margin-left: 10px; margin-top: 10px; border-radius: 7px; border: none; width: 105px; height: 47px; background-color: white; border: 1px solid gray;"
                      @click="handleBrandClick(key)">
                <!--                <img :src="`https://example.com/${key}.jpg`" style="width: 42%; margin-left: -1px;">-->
                <span style=" margin-top: 8px;font-weight: 900;">{{ value }}</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 价格 -->
        <div style="float: left;width: 100%;height: 128px;margin-left: 24px;margin-top: 20px">
          <h2 style="float: left">价格</h2>
          <van-slider
              v-model="value"
              active-color="#3474FF"
              bar-height="10px"
              style="float: left"
              @change="onChange"></van-slider>
          <span style="color: gray;float: left;margin-top: 10px">￥10W</span>
          <span style="color: gray;float: right;margin-top: 10px;margin-right: 26px">￥100W</span>
        </div>

        <!-- 特性 -->
        <div style="float: left;width: 100%;height: 128px;margin-left: 8px;margin-top: 20px;">
          <h2 style="float: left;margin-top: -10px;margin-left: 17px">特性</h2>
          <div id="texing" style="width:100%;height: 150px;float: left;margin-left: 20px">
            <div v-for="(value, key) in texing" :key="key" style="float: left;">
              <button :class="{'active-texing': selectedTexing === key}"
                      style="margin-left: 10px; margin-top: 10px; border-radius: 7px; border: none; width: 105px; height: 47px; background-color: white; border: 1px solid gray;"
                      @click="handleTexingClick(key)">
                <span style="text-align: center; margin-top: 8px;font-weight: 900;">{{ value }}</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 确定按钮 -->
        <div
            style="width: 90%; height: 60px; float: left; margin-left: 20px; background-color: rgb(52, 116, 255); margin-top: 55px;border-radius: 10px">
          <p style="color: white;text-align: center" @click="findList">确定</p>
        </div>
      </div>
    </van-popup>



  </div>


</template>

<script>

export default {
  data() {
    return {
      cars:{},
      value2: '',
      showAction: false,
      name: "ScreenView",
      value: 50,
      show: false,
      flag: true,
      active: 0,
      selectedCarType:null,
      selectedBrand: null,
      selectedTexing: null,
      top: {
        all: '所有车辆',
        suv: 'SUV',
        econ: '经济',
        mpv: 'MPV',
      },
      brand: {
        falali: '法拉利',
        baoma: '宝马',
        baoshijie: '保时捷',
        fute: '福特',
        wuling: '五菱宏光',
        bingli: '宾利',
        bentian: '本田',
        qita: '其他车',
      },
      texing: {
        zhenpi: '真皮座椅',
        zidong: '自动驾驶',
        shoudong: '手动驾驶',
        waiguan: '外观设计',
        neishi: '内饰和舒适性',
        dongli: '动力和性能'
      },

      itemList: [
        {
          name: "法拉利",
          distance: 2.1,
          fuel: 30,
          rating: 4.6,
          reviews: 600,
          price: 250,
          images: [
            "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_002.PNG?e=1736996518&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:Buxm8kXOX09pblRiPCixeF3rOPE=",
          ]
        },
        {
          name: "宝马",
          distance: 0.8,
          fuel: 50,
          rating: 4.2,
          reviews: 400,
          price: 180,
          images: [
            "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_001.PNG?e=1736996532&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:OW0N3sM28dh7hxCkhwrnrqtcyh4="
          ]
        },
        {
          name: "保时捷",
          distance: 1.3,
          fuel: 24,
          rating: 4.4,
          reviews: 532,
          price: 200,
          images: [
            "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_003.PNG?e=1736995955&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:k0_6fql8imF4iO2AS_8iuauRv4k=",

          ]
        },
        {
          name: "法拉利",
          distance: 2.1,
          fuel: 30,
          rating: 4.6,
          reviews: 600,
          price: 250,
          images: [
            "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_002.PNG?e=1736996518&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:Buxm8kXOX09pblRiPCixeF3rOPE=",
          ]
        },
        {
          name: "宝马",
          distance: 0.8,
          fuel: 50,
          rating: 4.2,
          reviews: 400,
          price: 180,
          images: [
            "http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/DM_20250115191008_001.PNG?e=1736996532&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:OW0N3sM28dh7hxCkhwrnrqtcyh4="
          ]
        },
      ],
      carList: [
        // {
        //   imgSrc: 'http://sq5qizw6e.hn-bkt.clouddn.com/c1.png',
        //   name: '宾利飞驰',
        //   fuel: '24%',
        //   rating: '4.4',
        //   reviews: 532,
        //   distance: '1.3公里',
        //   price: '￥200'
        // },
        // // 你可以在这里添加更多汽车对象，结构和上面的对象相同
        // {
        //   imgSrc: 'http://sq5qizw6e.hn-bkt.clouddn.com/c1.png',
        //   name: '宾利飞驰',
        //   fuel: '24%',
        //   rating: '4.4',
        //   reviews: 532,
        //   distance: '1.3公里',
        //   price: '￥200'
        // },
        // {
        //   imgSrc: 'http://sq5qizw6e.hn-bkt.clouddn.com/c1.png',
        //   name: '宾利飞驰',
        //   fuel: '24%',
        //   rating: '4.4',
        //   reviews: 532,
        //   distance: '1.3公里',
        //   price: '￥200'
        // },
        // {
        //   imgSrc: 'http://sq5qizw6e.hn-bkt.clouddn.com/c1.png',
        //   name: '宾利飞驰',
        //   fuel: '24%',
        //   rating: '4.4',
        //   reviews: 532,
        //   distance: '1.3公里',
        //   price: '￥200'
        // }
      ],
      filteredCarList: [] // 用于存储筛选后的车辆数据

    };
  },
  watch: {
    cars: {
      deep: true,
      handler() {
        this.flag1 = false
        this.flag2 = true
        this.findCarAll()
      }
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    if (this.user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({name: 'login'});
          },
          1000
      )
    }
    this.findCarAll()
  },
  methods: {
    tiaozhuan(car){
      localStorage.setItem("cars", JSON.stringify(car))
      this.$router.push({name: 'details', query: {car: car}})
    },
    findCarAll() {
      this.axios.post(`http://localhost:10086/api/cars/cars/getCarsByCarModel`,this.cars).then(res => {
        if (res.data.code == 200) {
          this.carList = res.data.data
          console.log(this.carList)
        } else {
          this.cars = null
        }
      })
    },
    findList() {
      this.filterCars();
      // 通过对象键访问对应的值
      const selectedCarTypeName = this.selectedCarType? this.top[this.selectedCarType] : "";
      const brand = this.selectedBrand? this.brand[this.selectedBrand] : "";
      const character = this.selectedTexing? this.texing[this.selectedTexing] : "";
      const numValue = parseInt(this.value, 10); // 将字符串转换为整数
      const encodedValue = encodeURIComponent(numValue.toString()); // 编码转换后的数字
      console.log(selectedCarTypeName, brand, character, this.value);

      this.show = false;
      this.axios.get(`http://localhost:10086/api/cars/cars/findScreen/${brand}/${encodedValue}/${character}`).then(res => {
        if (res.data.code === 200) {
          this.filteredCarList = res.data.data;
          this.carList = this.filteredCarList;
          console.log(this.filteredCarList);
          // 重置选中的品牌和特性
          this.selectedBrand = null;
          this.selectedTexing = null;
        }
      });
    },
    handleBrandClick(brand) {
      this.selectedBrand = brand; // 设置选中的品牌
    },
    handleTexingClick(texing) {
      this.selectedTexing = texing; // 设置选中的特性
    },
    onSearch() {
      this.$toast(this.value2);
    },
    onFocus() {
      this.showAction = true;
    },
    onCancel() {
      this.showAction = false;
    },
    showPopup() {
      this.show = true;
    },
    onChange(value) {
      this.$toast('当前值：' + value);
    },
    filterCars() {
      // 检查 this.carList 是否为有效的数组
      if (!Array.isArray(this.carList)) {
        // 如果不是有效的数组，将 filteredCarList 置为空数组
        this.filteredCarList = [];
        return;
      }

      // 根据品牌、价格范围和特性筛选车辆
      this.filteredCarList = this.carList.filter(car => {
        // 类型筛选
        const matchesCarType = !this.selectedCarType || car.carModel.includes(this.top[this.selectedCarType]);
        // 品牌筛选
        const matchesBrand = !this.selectedBrand || car.carModel.includes(this.brand[this.selectedBrand]);
        // 价格筛选
        const matchesPrice = car.pricePerHour <= this.value;
        // 特性筛选（假设车辆数据中有 features 字段）
        const matchesTexing = !this.selectedTexing || (car.features && car.features.includes(this.texing[this.selectedTexing]));
        // 返回符合条件的车辆
        return matchesCarType && matchesBrand && matchesPrice && matchesTexing;
      });
    },
    fanhui() {
      this.$router.go(-1);
    }
  },
  mounted() {
    // 初始化时显示所有车辆
    this.filteredCarList = this.carList;
  }
};

</script>

<style>
@import './index.css';

#brand-one button.active-brand {
  background: #3474FF !important;
  color: white !important;
}

#texing button.active-texing {
  background: #3474FF !important;
  color: white !important;
}

.carRentalDiv2 {
  float: left;
  width: 85%;
  height: 100px;
  margin: 20px 5%;
  background: #ffffff;
  text-align: left;
  border-radius: 10px;
}

.carRentalImg2 {
  width: 120px;
  height: 80px;
}

.carRentalDiv3 {
  float: left;
  margin-top: 10px;
}

.carRentalDiv4 {
  float: left;
  margin-top: 10px;
  margin-left: 5px;
}

.carRentalB2 {
  margin-top: 20px;
}

.carRentalSpan1 {
  margin-top: 10px;
}

.carRentalSpan2 {
  margin-bottom: 10px;
}

.carRentalSpan3 {
  color: #f7ff00;
}

.icon1 {
  width: 18px;
  height: 18px;
}

.icon2 {
  width: 15px;
  height: 15px;
}

.carRentalDiv5 {
  float: right;
  margin-top: 10px;
  margin-right: 8px;
}
</style>